<template>
  <div class="student-card">
    <!-- 头像区域 -->
    <div class="avatar-section">
      <img
          src="@/assets/images/userprofile/img.png"
          :alt="studentInfo.name"
          class="avatar"
      />
    </div>

    <!-- 个人信息区域 -->
    <div class="info-section">
      <!-- 左列信息 -->
      <div class="info-column left-column">
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ studentInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">出生日期：</span>
          <span class="value">{{ studentInfo.birthDate }}</span>
        </div>
        <div class="info-item">
          <span class="label">专业：</span>
          <span class="value">{{ studentInfo.major }}</span>
        </div>
        <div class="info-item">
          <span class="label">年级：</span>
          <span class="value">{{ studentInfo.grade }}</span>
        </div>
        <div class="info-item">
          <span class="label">电子邮箱：</span>
          <span class="value">{{ studentInfo.email }}</span>
        </div>
      </div>

      <!-- 右列信息 -->
      <div class="info-column right-column">
        <div class="info-item">
          <span class="label">学号：</span>
          <span class="value">{{ studentInfo.studentId }}</span>
        </div>
        <div class="info-item">
          <span class="label">学校：</span>
          <span class="value">{{ studentInfo.department }}</span>
        </div>
        <div class="info-item">
          <span class="label">籍贯：</span>
          <span class="value">{{ studentInfo.hometown }}</span>
        </div>
        <div class="info-item">
          <span class="label">班级：</span>
          <span class="value">{{ studentInfo.className }}</span>
        </div>
        <div class="info-item">
          <span class="label">电话：</span>
          <span class="value">{{ studentInfo.phone }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 默认头像
const defaultAvatar = '@/assets/images/userprofile/img.png'

// 学生信息数据
const studentInfo = ref({
  name: '李明',
  birthDate: '2005年4月',
  major: '计算机科学与技术',
  grade: '2025级',
  email: '18875855588@qq.com',
  studentId: '20222154521',
  department: '河南某职业学院',
  hometown: '河南省郑州市中牟县',
  className: '2025级计算机1班',
  phone: '18824156845',
  avatar: '' // 可以设置头像URL
})

// 定义props（如果需要从父组件传入数据）
const props = defineProps({
  studentData: {
    type: Object,
    default: () => ({})
  }
})

// 如果传入了学生数据，则使用传入的数据
if (props.studentData && Object.keys(props.studentData).length > 0) {
  studentInfo.value = { ...studentInfo.value, ...props.studentData }
}
</script>

<style scoped>
.student-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 头像区域 */
.avatar-section {
  text-align: center;
  margin-bottom: 40px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 信息区域 */
.info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.label {
  font-weight: 600;
  color: #333;
  min-width: 80px;
  flex-shrink: 0;
  margin-right: 8px;
}

.value {
  color: #666;
  flex: 1;
  word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-card {
    padding: 30px 20px;
    margin: 20px;
  }

  .info-section {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .avatar {
    width: 100px;
    height: 100px;
  }

  .info-item {
    flex-direction: column;
    gap: 4px;
  }

  .label {
    min-width: auto;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .student-card {
    padding: 20px 15px;
    margin: 10px;
  }

  .avatar-section {
    margin-bottom: 30px;
  }

  .avatar {
    width: 80px;
    height: 80px;
  }

  .info-column {
    gap: 15px;
  }
}
</style>
